<template>
	<div class="app-container">

		<section>
			<!--工具条-->
			<el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
				<el-form :inline="true" :model="formInline">
					<el-form-item>
						<el-button type="primary" @click="history">历史列表</el-button>
					</el-form-item>-->
					<span style="font-size:20px;font-weight: bold; display:block;margin-bottom: 20px;margin-left:320px;">异常单</span>
					<div style="margin-top: 15px;">

						<el-form-item label="采购单号:">
							<el-input v-model="formInline.F" placeholder="采购单号"></el-input>
						</el-form-item>
						<el-form-item label="收货时间:">
							<el-date-picker v-model="formInline.F" type="datetime" placeholder="选择日期时间">
							</el-date-picker>
						</el-form-item>
					</div>
					<div>
						<el-form-item label="收货人:">
							<el-input v-model="formInline.F" placeholder="收货人（仓管员）"></el-input>
						</el-form-item>
						<el-form-item label="货物状态:">
							<el-select v-model="formInline.E" placeholder="货物状态">
								<el-option v-for="item in Operator" :key="item.value" :label="item.label" :value="item.value">
								</el-option>
							</el-select>
						</el-form-item>
					</div>
					<div>
						<el-form-item label="供货商ID:">
							<el-input v-model="formInline.C" placeholder="供货商ID"></el-input>
						</el-form-item>
						<el-form-item label="供货商名称:">
							<el-select v-model="formInline.E" placeholder="供货商名称">
								<el-option v-for="item in Operator" :key="item.value" :label="item.label" :value="item.value">
								</el-option>
							</el-select>
						</el-form-item>
					</div>

				</el-form>
			</el-col>
			<el-table :data="tableData" show-summary border style="width: 100%; margin-top: 20px">
				<el-table-column type="selection" width="55">
				</el-table-column>
				<el-table-column prop="name" label="商品名称">
				</el-table-column>
				<el-table-column prop="Odernumber" sortable label="订货数量">
				</el-table-column>
				<el-table-column prop="sendnumber" sortable label="发货数量">
				</el-table-column>
				<el-table-column prop="getnumber" sortable label="到货数量">
				</el-table-column>
				<el-table-column prop="abnormal" label="异常描述">
				</el-table-column>
				<el-table-column prop="solution" label="解决办法">
				</el-table-column>
				<el-table-column prop="responsible" label="责任人">
				</el-table-column>
			</el-table>
			<!--新增订货单-->
			<el-dialog :visible.sync="addFormVisible" width="73%">
				<el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
					<el-form :inline="true" :model="formInline">
						<el-form-item label="采购单号:">
							<el-input v-model="formInline.F" placeholder="采购单号"></el-input>
						</el-form-item>
						<el-form-item label="货物状态:">
							<el-select v-model="formInline.E" placeholder="货物状态">
								<el-option v-for="item in Operator" :key="item.value" :label="item.label" :value="item.value">
								</el-option>
							</el-select>
						</el-form-item>
						<el-form-item>
							<el-button type="primary">查询</el-button>
						</el-form-item>
					</el-form>
				</el-col>
				<el-form :model="inServForm" ref="inServForm">
					<el-form-item prop="servin">
						<!--	<el-button type="primary" @click="addRow(infiledList)">新增</el-button>-->
						<template>
							<el-table border :data="infiledList" style="width: 100%">
								<el-table-column prop="name" label="商品名称" width="150">
									<template scope="scope">
										<el-input size="mini" v-model="scope.row.name"></el-input>
									</template>
								</el-table-column>
								<el-table-column prop="Odernumber" label="订货货数量" width="150">
									<template scope="scope">
										<el-input size="mini" v-model="scope.row.Odernumber"></el-input>
									</template>
								</el-table-column>
								<el-table-column prop="sendnumber" label="发货数量" width="150">
									<template scope="scope">
										<el-input size="mini" v-model="scope.row.sendnumber"></el-input>
									</template>
								</el-table-column>
								<el-table-column prop="getnumber" label="到货数量" width="150">
									<template scope="scope">
										<el-input size="mini" v-model="scope.row.getnumber"></el-input>
									</template>
								</el-table-column>

								<el-table-column prop="abnormal" label="异常描述" width="150">
									<template scope="scope">
										<el-input v-model="scope.row.abnormal" size="mini"></el-input>
									</template>
								</el-table-column>
								<el-table-column prop="solution" label="解决办法" width="150">
									<template scope="scope">
										<el-input v-model="scope.row.solution" size="mini"></el-input>
									</template>
								</el-table-column>
								<el-table-column prop="responsible" label="责任人" width="150">
									<template scope="scope">
										<el-input v-model="scope.row.responsible" size="mini"></el-input>
									</template>
								</el-table-column>

								<el-table-column fixed="right" label="操作" width="200">
									<!--<template slot-scope="scope">
										<el-button type="primary" @click="addRow(infiledList)">新增</el-button>
										<el-button type="danger" @click.native.prevent="deleteRow(scope.$index, infiledList)" size="small">删除 </el-button>
									</template>-->
								</el-table-column>
							</el-table>
						</template>
					</el-form-item>
				</el-form>
			</el-dialog>
			<div slot="footer" class="dialog-footer">
				<el-button @click.native="addFormVisible = false">取消</el-button>
				<el-button type="primary" @click.native="addSubmit">新增</el-button>
				<el-button type="primary" @click.native="addSubmit">新增并继续录入</el-button>
			</div>
			<!--<el-pagination background layout=" prev, pager, next, jumper" @current-change="handleCurrentChange" :page-size="pageSize" :total="total" style="float:right ;margin-top: 10px;">
			</el-pagination>-->

		</section>

	</div>
</template>

<script>
	export default {
		data() {
			return {

				inServForm: [],
				infiledList: [{
					name: '槑的说',
					Odernumber: '1800',
					sendnumber: '1200',
					getnumber: '1200',
					abnormal: 'ldhgklsdh',
					solution: 'ABDGD',
					responsible: 'SDFGSA'
				}],

				checked: true,
				logisticsLoading: false,
				logisticsFormVisible: false,
				addLoading: false,
				addFormVisible: false,
				list: [],
				page: 1,
				pageSize: 20,
				total: 10000000000,
				Oder: [{
						value: -1,
						label: "没有交易"
					},
					{
						value: 0,
						label: "部分交易"
					},
					{
						value: 1,
						label: "交易完成"
					},
					{
						value: 2,
						label: "超额完成"
					},
					{
						value: 3,
						label: "终止交易"
					},
				],
				addForm: {},
				logisticsForm: {},
				formInline: {
					A: "",
					B: "",
					C: "",
					D: "",
					E: "",
					F: "",
					G: "",
					H: "",
					I: ""
				},
				tableData: [{
					name: '槑的说',
					Odernumber: '1800',
					sendnumber: '1200',
					getnumber: '1200',
					abnormal: 'ldhgklsdh',
					solution: 'ABDGD',
					responsible: 'SDFGSA'
				}, {
					name: '槑的说',
					Odernumber: '1800',
					sendnumber: '1200',
					getnumber: '1200',
					abnormal: 'ldhgklsdh',
					solution: 'ABDGD',
					responsible: 'SDFGSA'
				}, {
					name: '槑的说',
					Odernumber: '1800',
					sendnumber: '1200',
					getnumber: '1200',
					abnormal: 'ldhgklsdh',
					solution: 'ABDGD',
					responsible: 'SDFGSA'
				}, {
					name: '槑的说',
					Odernumber: '1800',
					sendnumber: '1200',
					getnumber: '1200',
					abnormal: 'ldhgklsdh',
					solution: 'ABDGD',
					responsible: 'SDFGSA'
				}],
				options: [{
					value: '选项1',
					label: '公司总部'
				}, {
					value: '选项2',
					label: '公司总部'
				}, {
					value: '选项3',
					label: '公司总部'
				}, {
					value: '选项4',
					label: '公司总部'
				}, {
					value: '选项5',
					label: '公司总部'
				}],
				Oderlist: [{
						value: '选项1',
						label: '申请订货'
					}, {
						value: '选项2',
						label: '确定订货'
					}, {
						value: '选项3',
						label: '已订'
					}, {
						value: '选项4',
						label: '待付款'
					}, {
						value: '选项5',
						label: '已付款'
					},
					{
						value: '选项6',
						label: '已入库'
					}, {
						value: '选项7',
						label: '归档'
					}
				],
				Operator: [{
					value: '选项1',
					label: 'A'
				}, {
					value: '选项2',
					label: 'B'
				}, {
					value: '选项3',
					label: 'C'
				}, {
					value: '选项4',
					label: 'D'
				}, {
					value: '选项5',
					label: 'E'
				}],
				value7: '',
				value8: '',
				value9: '',
				input: ''
			};
		},
		methods: {

			deleteRow(index, rows) { //删除改行
				rows.splice(index, 1);
			},

			addRow(tableData, event) {
				tableData.push({
					name: '',
					Odernumber: '',
					sendnumber: '',
					getnumber: '',
					abnormal: '',
					solution: '',
					responsible: ''
				})
			},

			handleCurrentChange(val) {
				this.page = val;
			},
			//显示新增界面
			handleAdd: function() {

				this.addFormVisible = true;
				this.addForm = {}

			},

			doPrint() {
				//        let newWindow = window.open('_blank');   //  打开新窗口
				//        let codestr = document.getElementById('print').innerHTML;   //  获取需要生成pdf页面的div代码
				//        console.log(codestr);
				//        newWindow.document.write(codestr);   //  向文档写入HTML表达式或者JavaScript代码
				//        newWindow.document.close();     //  关闭document的输出流, 显示选定的数据
				//        newWindow.print();   //  打印当前窗口
				//        return true;
				let subOutputRankPrint = document.getElementById('print');
				let newContent = subOutputRankPrint.innerHTML;
				let oldContent = document.body.innerHTML;
				document.body.innerHTML = newContent;
				window.print();
				window.location.reload();
				document.body.innerHTML = oldContent;
				return false;
			},
		},

	};
</script>

<style>
	.demonstration {
		margin-right: 20px;
		margin-top: 15px;
	}
	
	.text_input {
		width: 189px;
		height: 28px;
		margin-right: 20px;
		margin-top: 15px;
	}
	
	.add {
		margin-right: 10px;
		margin-top: 10px;
	}
	
	.add_input {
		width: 160px;
		height: 30px;
		margin-right: 10px;
		margin-top: 10px;
	}
	
	.el-input--medium .el-input__inner {
		height: 36px;
		line-height: 36px;
		width: 200px;
	}
	
	.el-form-item__label {
		line-height: 36px;
		width: 120px;
	}
	
	.el-pagination__editor.el-input .el-input__inner {
		height: 28px;
		width: 40px;
	}
</style>